<template>
  <div class="login">
    <header>
      <img src="../../assets/logo.png"
           alt="logo">
      <span>欢迎来到旋风网</span>
    </header>
    <div class="box">
      <input type="text"
             v-model.trim="account"
             placeholder="账号">
      <input type="password"
             v-model.trim="password"
             placeholder="密码">
      <div class="box_botton">
        <span>忘记密码?</span>
        <span>注册新用户</span>
      </div>
    </div>
    <footer>
      <button class="btn"
              @click="login">登录</button>
      <div class="agreement">
        <img v-if="!checkbox"
             @click="checkbox = !checkbox"
             src="../../assets/imgs/checkbox_false@2x.png"
             alt="">
        <img v-else
             @click="checkbox = !checkbox"
             src="../../assets/imgs/checkbox_true@2x.png"
             alt="">
        <div>我已阅读并同意<span>《隐私协议》</span></div>
      </div>
    </footer>
  </div>
</template>

<script>
import { toLogin } from '../../utils/api.js'
import { localSet } from '../../utils/mylocal.js'
import md5 from '../../utils/md5.js'
export default {
  data () {
    return {
      account: '13426543201',
      password: '12345678',
      checkbox: false
    }
  },
  methods: {
    async login () {
      if (!this.account) {
        this.$toast.fail('请填写用户名')
        return
      }
      if (!this.password) {
        this.$toast.fail('请填写密码')
        return
      }
      if (!this.checkbox) {
        this.$toast.fail('请勾选协议')
        return
      }
      let md5Password = md5(this.password)
      let data = await toLogin({
        "mobile": this.account,
        "password": md5Password
      })
      // this.$store.commit('setToken', data.token)
      localSet('token', data.token)
      // console.log('登录咯', data)
      this.$router.push('/home')
    }
  },
}
</script>

<style lang='less'>
.login {
  height: 100vh;
  padding: 0 26px;
  background: url("../../assets/imgs/250@2x.png");
  background-size: 100% 100%;
  header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    margin-bottom: 15px;
    img {
      width: 80px;
      height: 74px;
    }
    span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 21px;
      color: #5f5c50;
    }
  }
  .box {
    input {
      margin-bottom: 15px;
      width: 100%;
      height: 56px;
      background: #fcfcfc;
      opacity: 1;
      border: 0;
      border-radius: 28px;
      padding-left: 24px;
      font-size: 16px;
    }
    .box_botton {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 19px;
        color: #333333;
      }
    }
  }
  footer {
    position: fixed;
    top: 462px;
    .btn {
      width: 322px;
      height: 56px;
      background: #0086f1;
      border: 0;
      border-radius: 28px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      margin-bottom: 47px;
    }
    .agreement {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 15px;
        height: 15px;
        margin-right: 8px;
      }
      div {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 16px;
        color: #333333;
      }
    }
  }
}
</style>